// define the namespace
syslib.namespace("syslib.ui");

// tag conversor
syslib.ui.ButtonItemTag = __class(syslib.ui.TagConversor, {
	component : null,
	
	execute : function(){
		// create the button
		var button = new syslib.ui.ButtonItem(this.__attributes);
		
		// append the button
		button.appendTo(this.__container);
		
		// store the component
		this.component = button;
	},

	getComponent : function(){
		// set the form
		return this.component;
	}
});

// component definition
syslib.ui.ButtonItem = __class(syslib.ui.UIComponent, {
	__componentName : "syslib.ui.ButtonItem", 
	__options : {}, 
	
	container : null, 
	index : 0,
	selected : false,
	
	__construct : function(options){
		// set the options
		this.__options = __extend({
			id : syslib.element.generateID(), 
			title : false, 
			image : false
		}, options);
		
		// set the default values
		this.container = null;
		this.index = 0;
	},

	__createElement : function(){
		// set the attributes of the element
		var attributes	= __extend(this.__attributes, {
			"class" : "syslib-buttonitem-container-normal"
		});
		
		// create the main element
		var element = document.createElement("div");
		
		// set the class
		element.className = "syslib-buttonitem-container-normal";
		
		// set the innerHTML
		if(__valid(this.__options.title)){
			element.innerHTML += this.__options.title;
		}
		if(__valid(this.__options.image)){
			element.innerHTML += "<img src='"+this.__options.image+"' />";
		}
		
		// store the element
		this.__element = element;

		// return
		return element;
	},

	appendTo : function(container){
		// add the item into the menu
		this.index = container.appendChild(this);
		
		// store the container
		this.container = container;
		
		// get the element
		var element = this.getElement();
		
		// create the events
		__evtListen("click", element, function(){
			this.container.selectItem(this.index);
		}.applyTo(this));
		
		__evtListen("mouseover", element, function(){
			this.__over();
		}.applyTo(this));

		__evtListen("mouseout", element, function(){
			this.__unselect();
		}.applyTo(this));
	},
	
	appendChild : function(child){
		this.getElement().appendChild(child);
	},

	__select : function(){
		this.selected = true;
	},

	__over : function(){
		this.__element.className = "syslib-buttonitem-container-over";
	},

	__unselect : function(){
		this.selected = false;
		this.__element.className = "syslib-buttonitem-container-normal";
	}
});